<template>
  <main class="main-container section-content">
    <side-menu></side-menu>
    <div v-if="info" class="content-container">
      <a-spin :spinning="confirmLoading">
        <j-form-container>
          <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
            <a-row>
              <a-col v-if="model" :span="24">
                <a-form-model-item label="账户类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountType">
                  <a-select disabled v-model="model.accountType">
                    <a-select-option v-for="(item, index) in fullAccountTypeOptions" :key="index" :value="item.value">{{
                      item.key
                    }}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>

              <a-col :span="24">
                <a-form-model-item
                  label="认证状态"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="certificateAuditStatus"
                >
                  <j-dict-select-tag
                    disabled
                    type="list"
                    v-model="model.certificateAuditStatus"
                    dictCode="certificate_audit_status"
                    placeholder="请选择资质认证状态：0-未认证 1-认证中 2-已认证 3-认证驳回"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  label="开户银行"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="bankAccountName"
                >
                  <a-input v-model="model.bankAccountName" placeholder="请输入开户银行"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="银行账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankAccountNum">
                  <a-input v-model="model.bankAccountNum" placeholder="请输入银行账号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  :label="certificateLabel"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="certificate"
                >
                  <j-image-upload
                    isMultiple
                    :disabled="certificateDisabled"
                    :number="2"
                    v-model="model.certificate"
                  ></j-image-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  label="其他资质"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="otherCertificates"
                >
                  <j-image-upload
                    isMultiple
                    :disabled="certificateDisabled"
                    :number="10"
                    v-model="model.otherCertificates"
                  ></j-image-upload>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </j-form-container>
        <div class="bottom-button-panel">
          <a-button @click="submitClick" type="primary" :disabled="submitButtonDisabled">{{ sumitTitle }}</a-button>
        </div>
      </a-spin>
    </div>
  </main>
</template>

<script>
import SideMenu from './components/SideMenu.vue'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'AccountAuth',
  components: { SideMenu },
  props: {},
  data() {
    return {
      isAvatarMultiple: false,
      usernameDisabled: false,
      model: {
        username: '',
        password: '',
        accountType: 1,
        gender: 0,
        captcha: '',
        phoneNumber: '',
      },
      validatorRules: {
        bankAccountName: [{ required: true, message: '请输入开户银行' }],
        bankAccountNum: [{ required: true, message: '请输入银行账号' }],
        certificate: [{ required: true, message: '请上传资质文件' }],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      fullAccountTypes: [
        '平台会员',
        '问答专家',
        '平台商户',
        '评估机构',
        '产业联盟',
        '产业联盟成员',
        '产业联盟理事会成员',
        '产业联盟专家咨委员会成员',
        '产业联盟秘书处成员',
      ],
    }
  },
  computed: {
    fullAccountTypeOptions() {
      const options = []
      for (let index = 0; index < this.fullAccountTypes.length; index++) {
        const key = this.fullAccountTypes[index]
        const accountType = index + 1
        const option = { key: key, value: accountType }
        options.push(option)
      }
      return options
    },

    certificateLabel() {
      const model = this.model
      return model && model.accountType === 2 ? '资质证件(png、jpg)' : '营业执照(png、jpg)'
    },

    submitButtonDisabled() {
      const info = this.info
      const model = this.model
      // 资质认证状态：0-未认证 1-认证中 2-已认证 3-认证驳回
      console.log('\n\n info certificate submi :' + JSON.stringify(info.certificateAuditStatus) + '\n\n')
      if (info.certificateAuditStatus * 1 === 1) {
        return true
      } else {
        return model && model.certificate ? false : true
      }
    },

    certificateDisabled() {
      const info = this.info
      if (info.certificateAuditStatus * 1 === 1) {
        return true
      } else {
        return false
      }
    },

    sumitTitle() {
      // 资质认证状态：0-未认证 1-认证中 2-已认证 3-认证驳回
      var title = '提交'
      const certificateAuditStatus = this.info.certificateAuditStatus
      if (certificateAuditStatus === 2 || certificateAuditStatus === 3) {
        title = '更新'
      }
      return title
    },

    ...mapState('user', {
      info: (state) => state.info,
    }),
  },

  created() {
    this.getUserInfo()
  },

  mounted() {},
  methods: {
    ...mapActions('user', [
      'getUserInfoAction',
      'updateUserInfoAction',
      'certificateSubmitAction',
      'validateUsernameAction',
    ]),

    getUserInfo() {
      const that = this
      // this.modelDefault = JSON.parse(JSON.stringify(this.model))
      this.getUserInfoAction()
        .then(() => {
          that.model = JSON.parse(JSON.stringify(that.info))
        })
        .catch(() => {
          that.$message.error('获取用户信息失败')
        })
    },

    submitClick() {
      const that = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          const parameters = {
            ...this.model,
          }
          this.certificateSubmitAction(parameters)
            .then(() => {
              that.$refs.form.resetFields()
              that.getUserInfo()
              that.$message.success('提交成功，请等待审核')
            })
            .catch((error) => {
              that.$message.error(error.message)
            })
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
@import '~@/views/account/profile/shared.less';

.content-container {
  width: 100%;
}
</style>

